<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Col,
  DatePicker,
  Descriptions,
  DescriptionsItem,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
} from 'ant-design-vue';
import dayjs from 'dayjs';

import StatisticsCard from '#/components/hotel/StatisticsCard.vue';

// 入住状态枚举
enum CheckinStatus {
  CHECKED_IN = 'checkedIn',
  CHECKED_OUT = 'checkedOut',
  PENDING = 'pending',
}

// 入住状态配置
const checkinStatuses = [
  { value: CheckinStatus.PENDING, label: '待办理' },
  { value: CheckinStatus.CHECKED_IN, label: '已入住' },
  { value: CheckinStatus.CHECKED_OUT, label: '已退房' },
];

// 响应式数据
const loading = ref(false);
const showCheckinModal = ref(false);
const showDetailModal = ref(false);
const showCheckoutModal = ref(false);
const isEdit = ref(false);
const selectedCheckin = ref<any>(null);
const checkinFormRef = ref();

// 搜索表单
const searchForm = reactive({
  tenantName: '',
  roomNumber: '',
  status: undefined,
  checkinDate: null,
});

// 入住表单
const checkinForm = reactive({
  id: '',
  tenantName: '',
  tenantIdCard: '',
  tenantPhone: '',
  roomNumber: '',
  checkinDate: null,
  expectedCheckoutDate: null,
  depositAmount: null,
  firstRent: null,
  lockEnabled: false,
  status: CheckinStatus.PENDING,
  remarks: '',
});

// 退房表单
const checkoutForm = reactive({
  actualCheckoutDate: null,
  roomCondition: 'normal',
  deductionAmount: 0,
  refundAmount: 0,
  checkoutRemarks: '',
});

// 表单验证规则
const checkinRules = {
  tenantName: [{ required: true, message: '请输入租客姓名' }],
  tenantIdCard: [{ required: true, message: '请输入身份证号' }],
  tenantPhone: [{ required: true, message: '请输入联系电话' }],
  roomNumber: [{ required: true, message: '请选择房间' }],
  checkinDate: [{ required: true, message: '请选择入住日期' }],
  expectedCheckoutDate: [{ required: true, message: '请选择预计退房日期' }],
  depositAmount: [{ required: true, message: '请输入押金金额' }],
  firstRent: [{ required: true, message: '请输入首期租金' }],
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 模拟数据
const checkins = ref([
  {
    id: '1',
    tenantName: '张三',
    tenantIdCard: '110101199001011234',
    tenantPhone: '13800138001',
    roomNumber: '101',
    checkinDate: dayjs('2024-01-15'),
    expectedCheckoutDate: dayjs('2024-12-31'),
    depositAmount: 6000,
    firstRent: 3000,
    lockEnabled: true,
    status: CheckinStatus.CHECKED_IN,
    remarks: '客户要求尽快入住',
    createdAt: dayjs('2024-01-15 10:00'),
    updatedAt: dayjs('2024-01-15 10:00'),
  },
  {
    id: '2',
    tenantName: '李四',
    tenantIdCard: '110101199002022345',
    tenantPhone: '13800138002',
    roomNumber: '201',
    checkinDate: dayjs('2024-01-20'),
    expectedCheckoutDate: dayjs('2025-01-19'),
    depositAmount: 9000,
    firstRent: 4500,
    lockEnabled: false,
    status: CheckinStatus.PENDING,
    remarks: '等待门锁安装',
    createdAt: dayjs('2024-01-20 14:30'),
    updatedAt: dayjs('2024-01-20 14:30'),
  },
  {
    id: '3',
    tenantName: '王五',
    tenantIdCard: '110101199003033456',
    tenantPhone: '13800138003',
    roomNumber: '301',
    checkinDate: dayjs('2023-06-01'),
    expectedCheckoutDate: dayjs('2024-05-31'),
    depositAmount: 12_000,
    firstRent: 6000,
    lockEnabled: true,
    status: CheckinStatus.CHECKED_OUT,
    remarks: '正常退房',
    createdAt: dayjs('2023-06-01 16:20'),
    updatedAt: dayjs('2024-05-31 12:00'),
  },
]);

// 可用房间数据
const availableRooms = ref([
  { id: '101', roomNumber: '101', type: '一室一厅' },
  { id: '102', roomNumber: '102', type: '一室一厅' },
  { id: '201', roomNumber: '201', type: '两室一厅' },
  { id: '202', roomNumber: '202', type: '两室一厅' },
  { id: '301', roomNumber: '301', type: '三室两厅' },
  { id: '302', roomNumber: '302', type: '三室两厅' },
  { id: '303', roomNumber: '303', type: '三室两厅' },
]);

// 统计信息
const statistics = computed(() => {
  const today = dayjs().format('YYYY-MM-DD');
  const todayCheckinCount = checkins.value.filter(
    (item) => dayjs(item.checkinDate).format('YYYY-MM-DD') === today,
  ).length;
  const pendingCount = checkins.value.filter(
    (item) => item.status === CheckinStatus.PENDING,
  ).length;
  const checkedInCount = checkins.value.filter(
    (item) => item.status === CheckinStatus.CHECKED_IN,
  ).length;
  const checkedOutCount = checkins.value.filter(
    (item) => item.status === CheckinStatus.CHECKED_OUT,
  ).length;

  return {
    todayCheckinCount,
    pendingCount,
    checkedInCount,
    checkedOutCount,
  };
});

// 过滤后的入住列表
const filteredCheckins = computed(() => {
  let filtered = checkins.value;

  if (searchForm.tenantName) {
    filtered = filtered.filter((item) =>
      item.tenantName.includes(searchForm.tenantName),
    );
  }

  if (searchForm.roomNumber) {
    filtered = filtered.filter((item) =>
      item.roomNumber.includes(searchForm.roomNumber),
    );
  }

  if (searchForm.status) {
    filtered = filtered.filter((item) => item.status === searchForm.status);
  }

  if (searchForm.checkinDate) {
    filtered = filtered.filter((item) =>
      dayjs(item.checkinDate).isSame(searchForm.checkinDate, 'day'),
    );
  }

  return filtered;
});

// 表格列定义
const columns = [
  {
    title: '租客姓名',
    dataIndex: 'tenantName',
    key: 'tenantName',
    width: 120,
  },
  {
    title: '房间号',
    dataIndex: 'roomNumber',
    key: 'roomNumber',
    width: 100,
  },
  {
    title: '入住日期',
    dataIndex: 'checkinDate',
    key: 'checkinDate',
    width: 120,
    customRender: ({ text }: any) => formatDate(text),
  },
  {
    title: '押金',
    dataIndex: 'depositAmount',
    key: 'depositAmount',
    width: 100,
    customRender: ({ text }: any) => `¥${text}`,
  },
  {
    title: '首期租金',
    dataIndex: 'firstRent',
    key: 'firstRent',
    width: 100,
    customRender: ({ text }: any) => `¥${text}`,
  },
  {
    title: '入住状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '门锁权限',
    key: 'lockStatus',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    key: 'createdAt',
    width: 160,
    customRender: ({ text }: any) => formatDateTime(text),
  },
  {
    title: '操作',
    key: 'action',
    width: 280,
    fixed: 'right',
  },
];

// 工具函数
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    [CheckinStatus.PENDING]: 'orange',
    [CheckinStatus.CHECKED_IN]: 'green',
    [CheckinStatus.CHECKED_OUT]: 'blue',
  };
  return colorMap[status] || 'default';
};

const getStatusText = (status: string) => {
  const statusItem = checkinStatuses.find((item) => item.value === status);
  return statusItem?.label || status;
};

const formatDate = (date: any) => {
  return date ? dayjs(date).format('YYYY-MM-DD') : '';
  datedayjs.format;
};

const formatDateTime = (datetime: any) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm') : '';
  datetimedayjs.format;
};

// 监听押金和扣除费用变化，自动计算退还金额
watch(
  () => [checkoutForm.deductionAmount, selectedCheckin.value?.depositAmount],
  ([deduction, deposit]) => {
    if (deposit && deduction !== undefined) {
      checkoutForm.refundAmount = Math.max(0, deposit - deduction);
    }
  },
);

// 事件处理函数
const handleSearch = () => {
  pagination.current = 1;
};

const handleReset = () => {
  Object.assign(searchForm, {
    tenantName: '',
    roomNumber: '',
    status: undefined,
    checkinDate: null,
  });
  pagination.current = 1;
};

const handleView = (record: any) => {
  selectedCheckin.value = record;
  showDetailModal.value = true;
};

const handleEdit = (record: any) => {
  isEdit.value = true;
  Object.assign(checkinForm, {
    ...record,
    checkinDate: dayjs(record.checkinDate),
    expectedCheckoutDate: dayjs(record.expectedCheckoutDate),
  });
  showCheckinModal.value = true;
};

const handleComplete = (record: any) => {
  Modal.confirm({
    title: '完成入住',
    content: `确定要完成租客 ${record.tenantName} 的入住手续吗？`,
    onOk: () => {
      const index = checkins.value.findIndex((item) => item.id === record.id);
      if (index !== -1) {
        checkins.value[index].status = CheckinStatus.CHECKED_IN;
        checkins.value[index].updatedAt = dayjs();
        message.success('入住手续完成');
      }
    },
  });
};

const handleCheckout = (record: any) => {
  selectedCheckin.value = record;
  Object.assign(checkoutForm, {
    actualCheckoutDate: dayjs(),
    roomCondition: 'normal',
    deductionAmount: 0,
    refundAmount: record.depositAmount,
    checkoutRemarks: '',
  });
  showCheckoutModal.value = true;
};

const handleCheckoutConfirm = () => {
  if (!checkoutForm.actualCheckoutDate) {
    message.error('请选择实际退房日期');
    return;
  }

  const index = checkins.value.findIndex(
    (item) => item.id === selectedCheckin.value.id,
  );
  if (index !== -1) {
    checkins.value[index].status = CheckinStatus.CHECKED_OUT;
    checkins.value[index].updatedAt = dayjs();
    message.success('退房手续完成');
    showCheckoutModal.value = false;
  }
};

const handleCheckoutCancel = () => {
  showCheckoutModal.value = false;
  Object.assign(checkoutForm, {
    actualCheckoutDate: null,
    roomCondition: 'normal',
    deductionAmount: 0,
    refundAmount: 0,
    checkoutRemarks: '',
  });
};

const handleEnableLock = (record: any) => {
  Modal.confirm({
    title: '开通门锁',
    content: `确定要为租客 ${record.tenantName} 开通房间 ${record.roomNumber} 的门锁权限吗？`,
    onOk: () => {
      const index = checkins.value.findIndex((item) => item.id === record.id);
      if (index !== -1) {
        checkins.value[index].lockEnabled = true;
        checkins.value[index].updatedAt = dayjs();
        message.success('门锁权限已开通');
      }
    },
  });
};

const handleDownload = (record: any) => {
  message.success('入住单下载中...');
  // 这里可以实现实际的下载逻辑
};

const handleDelete = (record: any) => {
  Modal.confirm({
    title: '删除入住记录',
    content: `确定要删除租客 ${record.tenantName} 的入住记录吗？`,
    onOk: () => {
      const index = checkins.value.findIndex((item) => item.id === record.id);
      if (index !== -1) {
        checkins.value.splice(index, 1);
        message.success('删除成功');
      }
    },
  });
};

const handleSave = async () => {
  try {
    await checkinFormRef.value.validate();

    if (isEdit.value) {
      // 编辑模式
      const index = checkins.value.findIndex(
        (item) => item.id === checkinForm.id,
      );
      if (index !== -1) {
        checkins.value[index] = {
          ...checkinForm,
          updatedAt: dayjs(),
          updatedAt,
        };
        message.success('编辑成功');
      }
    } else {
      // 新增模式
      const newCheckin = {
        ...checkinForm,
        id: Date.now().toString(),
        createdAt: dayjs(),
        updatedAt: dayjs(),
      };
      checkins.value.unshift(newCheckin);
      message.success('入住手续办理成功');
    }

    handleCancel();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  showCheckinModal.value = false;
  isEdit.value = false;
  checkinFormRef.value?.resetFields();
  Object.assign(checkinForm, {
    id: '',
    tenantName: '',
    tenantIdCard: '',
    tenantPhone: '',
    roomNumber: '',
    checkinDate: null,
    expectedCheckoutDate: null,
    depositAmount: null,
    firstRent: null,
    lockEnabled: false,
    status: CheckinStatus.PENDING,
    remarks: '',
  });
};

// 初始化
onMounted(() => {
  // 可以在这里加载数据
});
</script>

<template>
  <div class="checkin-management">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>入住手续管理</h2>
      <Button type="primary" @click="showCheckinModal = true">
        <IconifyIcon icon="ant-design:plus-outlined" />
        办理入住
      </Button>
    </div>

    <!-- 搜索表单 -->
    <Card class="search-card">
      <Form :model="searchForm" layout="inline">
        <FormItem label="租客姓名">
          <Input
            v-model:value="searchForm.tenantName"
            placeholder="请输入租客姓名"
          />
        </FormItem>
        <FormItem label="房间号">
          <Input
            v-model:value="searchForm.roomNumber"
            placeholder="请输入房间号"
          />
        </FormItem>
        <FormItem label="入住状态">
          <Select
            v-model:value="searchForm.status"
            placeholder="请选择状态"
            style="width: 120px"
          >
            <SelectOption
              v-for="status in checkinStatuses"
              :key="status.value"
              :value="status.value"
            >
              {{ status.label }}
            </SelectOption>
          </Select>
        </FormItem>
        <FormItem label="入住日期">
          <DatePicker
            v-model:value="searchForm.checkinDate"
            placeholder="请选择日期"
            style="width: 150px"
          />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch">
            <IconifyIcon icon="ant-design:search-outlined" />
            搜索
          </Button>
          <Button @click="handleReset" style="margin-left: 8px">
            <IconifyIcon icon="ant-design:reload-outlined" />
            重置
          </Button>
        </FormItem>
      </Form>
    </Card>

    <!-- 统计卡片 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="今日入住"
          :value="statistics.todayCheckinCount"
          prefix=""
          color="#1890ff"
          icon="ant-design:login-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="待办理"
          :value="statistics.pendingCount"
          prefix=""
          color="#faad14"
          icon="ant-design:clock-circle-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="已入住"
          :value="statistics.checkedInCount"
          prefix=""
          color="#52c41a"
          icon="ant-design:check-circle-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="已退房"
          :value="statistics.checkedOutCount"
          prefix=""
          color="#722ed1"
          icon="ant-design:logout-outlined"
        />
      </Col>
    </Row>

    <!-- 入住记录列表 -->
    <Card class="table-card">
      <Table
        :columns="columns"
        :data-source="filteredCheckins"
        :loading="loading"
        :pagination="pagination"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'lockStatus'">
            <Tag :color="record.lockEnabled ? 'green' : 'red'">
              {{ record.lockEnabled ? '已开通' : '未开通' }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="handleView(record)">
                查看
              </Button>
              <Button type="link" size="small" @click="handleEdit(record)">
                编辑
              </Button>
              <Button
                v-if="record.status === 'pending'"
                type="link"
                size="small"
                @click="handleComplete(record)"
              >
                完成入住
              </Button>
              <Button
                v-if="record.status === 'checkedIn'"
                type="link"
                size="small"
                @click="handleCheckout(record)"
              >
                办理退房
              </Button>
              <Button
                v-if="!record.lockEnabled && record.status === 'checkedIn'"
                type="link"
                size="small"
                @click="handleEnableLock(record)"
              >
                开通门锁
              </Button>
              <Button type="link" size="small" @click="handleDownload(record)">
                下载
              </Button>
              <Button
                type="link"
                size="small"
                danger
                @click="handleDelete(record)"
              >
                删除
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 办理入住模态框 -->
    <Modal
      v-model:open="showCheckinModal"
      :title="isEdit ? '编辑入住信息' : '办理入住'"
      width="900px"
      @ok="handleSave"
      @cancel="handleCancel"
    >
      <Form
        ref="checkinFormRef"
        :model="checkinForm"
        :rules="checkinRules"
        layout="vertical"
      >
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="租客姓名" name="tenantName">
              <Input
                v-model:value="checkinForm.tenantName"
                placeholder="请输入租客姓名"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="租客身份证号" name="tenantIdCard">
              <Input
                v-model:value="checkinForm.tenantIdCard"
                placeholder="请输入身份证号"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="联系电话" name="tenantPhone">
              <Input
                v-model:value="checkinForm.tenantPhone"
                placeholder="请输入联系电话"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="房间号" name="roomNumber">
              <Select
                v-model:value="checkinForm.roomNumber"
                placeholder="请选择房间"
                style="width: 100%"
              >
                <SelectOption
                  v-for="room in availableRooms"
                  :key="room.id"
                  :value="room.roomNumber"
                >
                  {{ room.roomNumber }} ({{ room.type }})
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="入住日期" name="checkinDate">
              <DatePicker
                v-model:value="checkinForm.checkinDate"
                placeholder="请选择入住日期"
                style="width: 100%"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="预计退房日期" name="expectedCheckoutDate">
              <DatePicker
                v-model:value="checkinForm.expectedCheckoutDate"
                placeholder="请选择预计退房日期"
                style="width: 100%"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="押金金额" name="depositAmount">
              <InputNumber
                v-model:value="checkinForm.depositAmount"
                placeholder="请输入押金金额"
                style="width: 100%"
                :min="0"
                :precision="2"
                addon-after="元"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="首期租金" name="firstRent">
              <InputNumber
                v-model:value="checkinForm.firstRent"
                placeholder="请输入首期租金"
                style="width: 100%"
                :min="0"
                :precision="2"
                addon-after="元"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="门锁权限" name="lockEnabled">
              <Select
                v-model:value="checkinForm.lockEnabled"
                placeholder="请选择门锁权限"
                style="width: 100%"
              >
                <SelectOption :value="true">立即开通</SelectOption>
                <SelectOption :value="false">稍后开通</SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="入住状态" name="status">
              <Select
                v-model:value="checkinForm.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <SelectOption
                  v-for="status in checkinStatuses"
                  :key="status.value"
                  :value="status.value"
                >
                  {{ status.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="入住备注" name="remarks">
          <Textarea
            v-model:value="checkinForm.remarks"
            placeholder="请输入入住备注"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 入住详情模态框 -->
    <Modal
      v-model:open="showDetailModal"
      title="入住详情"
      width="800px"
      :footer="null"
    >
      <Descriptions :column="2" bordered>
        <DescriptionsItem label="租客姓名">
          {{ selectedCheckin?.tenantName }}
        </DescriptionsItem>
        <DescriptionsItem label="租客身份证号">
          {{ selectedCheckin?.tenantIdCard }}
        </DescriptionsItem>
        <DescriptionsItem label="联系电话">
          {{ selectedCheckin?.tenantPhone }}
        </DescriptionsItem>
        <DescriptionsItem label="房间号">
          {{ selectedCheckin?.roomNumber }}
        </DescriptionsItem>
        <DescriptionsItem label="入住日期">
          {{ formatDate(selectedCheckin?.checkinDate) }}
        </DescriptionsItem>
        <DescriptionsItem label="预计退房日期">
          {{ formatDate(selectedCheckin?.expectedCheckoutDate) }}
        </DescriptionsItem>
        <DescriptionsItem label="押金金额">
          ¥{{ selectedCheckin?.depositAmount }}
        </DescriptionsItem>
        <DescriptionsItem label="首期租金">
          ¥{{ selectedCheckin?.firstRent }}
        </DescriptionsItem>
        <DescriptionsItem label="入住状态">
          <Tag :color="getStatusColor(selectedCheckin?.status)">
            {{ getStatusText(selectedCheckin?.status) }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="门锁权限">
          <Tag :color="selectedCheckin?.lockEnabled ? 'green' : 'red'">
            {{ selectedCheckin?.lockEnabled ? '已开通' : '未开通' }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="入住备注" :span="2">
          {{ selectedCheckin?.remarks || '无' }}
        </DescriptionsItem>
        <DescriptionsItem label="创建时间">
          {{ formatDateTime(selectedCheckin?.createdAt) }}
        </DescriptionsItem>
        <DescriptionsItem label="更新时间">
          {{ formatDateTime(selectedCheckin?.updatedAt) }}
        </DescriptionsItem>
      </Descriptions>
    </Modal>

    <!-- 退房确认模态框 -->
    <Modal
      v-model:open="showCheckoutModal"
      title="办理退房"
      width="600px"
      @ok="handleCheckoutConfirm"
      @cancel="handleCheckoutCancel"
    >
      <div class="checkout-content">
        <div class="checkout-info">
          <h4>退房信息</h4>
          <p><strong>租客：</strong>{{ selectedCheckin?.tenantName }}</p>
          <p><strong>房间：</strong>{{ selectedCheckin?.roomNumber }}</p>
          <p>
            <strong>入住日期：</strong
            >{{ formatDate(selectedCheckin?.checkinDate) }}
          </p>
          <p>
            <strong>押金金额：</strong>¥{{ selectedCheckin?.depositAmount }}
          </p>
        </div>

        <Divider />

        <Form :model="checkoutForm" layout="vertical">
          <FormItem label="实际退房日期" name="actualCheckoutDate">
            <DatePicker
              v-model:value="checkoutForm.actualCheckoutDate"
              placeholder="请选择实际退房日期"
              style="width: 100%"
            />
          </FormItem>
          <FormItem label="房屋状态检查" name="roomCondition">
            <Select
              v-model:value="checkoutForm.roomCondition"
              placeholder="请选择房屋状态"
              style="width: 100%"
            >
              <SelectOption value="good">良好</SelectOption>
              <SelectOption value="normal">正常</SelectOption>
              <SelectOption value="damaged">有损坏</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="扣除费用" name="deductionAmount">
            <InputNumber
              v-model:value="checkoutForm.deductionAmount"
              placeholder="请输入扣除费用"
              style="width: 100%"
              :min="0"
              :precision="2"
              addon-after="元"
            />
          </FormItem>
          <FormItem label="退还押金" name="refundAmount">
            <InputNumber
              v-model:value="checkoutForm.refundAmount"
              placeholder="请输入退还押金"
              style="width: 100%"
              :min="0"
              :precision="2"
              addon-after="元"
            />
          </FormItem>
          <FormItem label="退房备注" name="checkoutRemarks">
            <Textarea
              v-model:value="checkoutForm.checkoutRemarks"
              placeholder="请输入退房备注"
              :rows="3"
            />
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
.checkin-management {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  color: #1f2937;
}

.search-card {
  margin-bottom: 24px;
}

.statistics-row {
  margin-bottom: 24px;
}

.table-card {
  margin-bottom: 24px;
}

.checkout-content {
  max-height: 60vh;
  overflow-y: auto;
}

.checkout-info {
  margin-bottom: 16px;
}

.checkout-info h4 {
  margin-bottom: 12px;
  color: #1f2937;
}

.checkout-info p {
  margin: 4px 0;
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 600;
  background-color: #fafafa;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-modal-body) {
  max-height: 60vh;
  overflow-y: auto;
}
</style>
